<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        #demo {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 原生JS 内联绑定事件-->
        <!-- <div id="demo" onclick="alert(11111)">111111</div> -->

        <!-- vue中的事件绑定方式 指令绑定 v-on 绑定内联事件 -->
        <!-- 1. 触发事件时执行对应的javascript表达式 -->
        <button  v-on:click="count++">加</button>
        <button  v-on:click="count--">减</button>
        <hr>
        <!-- 2. 触发事件时执行对应的事件函数,函数可以接收一个形参表示事件对象
            btn.onclick = addCount    // addCount 事件触发的函数
         -->
        <button  v-on:click="addCount">加</button>
        <button  v-on:click="reduceCount">减</button>
        <hr>

        <!-- 3. 触发事件, 执行对应的事件函数,在事件函数中调用传入的函数 (此种写法可以自己定义传入的参数)
            btn.onclick = function(){
                addCountN(2);    // 直接执行函数,不接收事件对象
            }  

            除了向自定义参数,还想接收事件对象
            btn.onclick = function($event){// $event vue定死的接收事件对象的属性
                addCountN(2,$event);
            }  

         -->

        <button  v-on:click="addCountN(2)">加n</button>
        <button  v-on:click="reduceCountN(2)">减n</button>
        <hr>

        <button  v-on:click="getParams($event,10,20)">接收自定义参数和事件对象</button>
        <button  v-on:click="($event)=>{getParams($event,10,20)}">接收自定义参数和事件对象</button>


        <p>
            {{count}}
        </p>
      
    </div>
</body>
<script>
    // 指令的常见用法
    // (1) v-指令名称 = "指令值"  
    // eg: v-html  v-text  v-pre

    // (2) v-指令名称:参数 = "指令值"    
    //   v-bind:id   v-bind:class
    //   v-on:click   v-bind:dblclick

    new Vue({
        el: "#app",
        data: {
            count:0,
        },
        methods:{
            addCount:function(e){
                console.log("this",this);
                console.log("事件对象",e);
                this.count ++;
            },
            reduceCount:function(){
                console.log("this",this);
                console.log("事件对象",e);
                this.count --;
            },
            addCountN:function(n=1){
                console.log("n",n);
                this.count += n;
            },
            reduceCountN:function(n=1){
                console.log("n",n);
                this.count -= n;
            },
            getParams:function(e,m,n){
                console.log("事件对象",e);
                console.log("m",m);
                console.log("n",n);
            }

        }
    });

</script>

</html>